<template>
  <view class="content" v-if="show">
   
      <view class="nav-box"  >
        <template v-if="isShowCity">
          <view class="nav-item" v-for="(item,index) in cityList" :key="index" @click="switchCity(item)"  :style="navId===item.id?'font-weight:bold':''">
            <template v-if="flag">
              {{item.text_cn}}
            </template>
            <template v-else>
              {{item.text_en}}
            </template>
          </view>
          <view class="nav-item" style="flex: 1;">
            请选择您的城市
          </view>
        </template>
        <template v-else>
          <view class="nav-item" v-for="(item,index) in tabList" :key="index" @click="swithTab(item)"  :style="navId===item.id?'font-weight:bold':''">
            <template v-if="flag">
              {{item.text_cn}}
            </template>
            <template v-else>
              {{item.text_en}}
            </template>
          </view>
        </template>
    
 
      </view>
      <image src="../../static/tab-bar/叉叉.png" class="close-icon" @click="closeHandler" v-show="!isShowCity"/>
       <image src="../../static/tab-bar/arrow-left.png" class="close-icon" @click="isShowCity=false" v-show="isShowCity"/>
  </view>
</template>

<script>
  import {mapState,mapMutations} from "vuex"
  export default {
    name:"my-nav",
    props:{
      show:{
        default:false,
        type:Boolean
      }
    },
    data() {
      return {
        //是否显示城市选择
        isShowCity:false,
        value:2,//当前选择的城市
        cityList:[
       
        ],
        tabList:[]
      };
    },
    computed:{
      ...mapState("style",["navId","flag"]),
      ...mapState("user",["user"])
    },
    watch:{
      isShow(val){
          this.zIndex=val?100:-1
      }
    },
    methods:{
      ...mapMutations("style",["setNavID","setCityId","setFlag"]),
      ...mapMutations("user",["setUser"]),
      //城市改变时触发
      // changeHandler(e){
      //   console.log(e);
      // },
      //点击关闭处理
      closeHandler(){
        this.$emit("close")
      },
      //切换城市
      switchCity(item){
        this.setCityId(item.value)
        this.value = item.value
        this.isShowCity = false
        this.tabList[6].text_cn = item.text_cn
        this.tabList[6].text_en = item.text_en
      },
      //点击导航处理
    async  swithTab(item){
        // 
          switch(item.id){
            //首页
            case 1:{
              uni.redirectTo({
                url:"/pages/index/index"
              })
              break
            }
            //产品系列
            case 2:{
              uni.redirectTo({
                url:"/pages/good/good"
              })
              break
            }
            //订单
            case 3:{
              uni.redirectTo({
                url:"/pages/order/order"
              })
              break
            }
            //个人中心
            case 4:{
              //用户没有登陆
              // console.log(JSON.stringify(this.user));
              if(JSON.stringify(this.user)==='{}'){
                console.log("aa");
                const user = uniCloud.importObject("user")
                 const result = await uni.getUserProfile({desc:"测试"})
                 let map ={
                   "userName":result.userInfo.nickName,
                   "img":result.userInfo.avatarUrl
                 }
                 const res = await user.addUser(map)
                 // console.log(res);
                   this.setUser(res)
            
              }
          
              uni.redirectTo({
                url:"/pages/my/my"
              })
              break
            }
            //购物车
            case 5:{
              uni.redirectTo({
                url:"/pages/cart/cart"
              })
              break
            }
            //语言
            case 6:{
              this.setFlag(!this.flag)
              break
            }
            //城市
            case 7:{
             this.isShowCity = true
              break
            }
          }
           if(item.id<6)this.setNavID(item.id)
      },
       async initCityList(){
         const style = uniCloud.importObject("style")
         const{data:res} = await style.getCityListInfo()
         this.cityList = res
       },
      async initTabList(){
       const style = uniCloud.importObject("style")
       const{data:res} = await style.getTabListInfo()
       this.tabList = res
       }
       
    },
    created() {
        this.initTabList()
        this.initCityList()
      
    }

  
  }
</script>

<style lang="scss" scoped>
.content{
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 750rpx;
  z-index: 100;
    .nav-box{
      width: 100%;
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .nav-item{
        display: flex;
        align-items: center;
      justify-content: center;
        margin: 40rpx;
        font-size: 20px;
      }
    }
  


    .close-icon{
      position: fixed;
      bottom: 5%;
      width: 50rpx;
      height: 50rpx;
      padding: 30rpx;
    }
  

}
</style>